<template>
    <div>
    <el-row :gutter="20" class="main-t">
        <el-col :span="3"><div class="one">
            排序：<el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
         {{message}}<i class="el-icon-arrow-down el-icon--right"></i></span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-show="zero" command="0">加入时间<i class="el-icon-top"></i></el-dropdown-item>
                <el-dropdown-item v-show="one" command="1">加入时间<i class="el-icon-bottom"></i></el-dropdown-item>
                <el-dropdown-item v-show="two" command="2">商品编码<i class="el-icon-top"></i></el-dropdown-item>
                <el-dropdown-item v-show="three"command="3">商品编码<i class="el-icon-bottom"></i></el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        </div></el-col>
        <el-col :span="16">
            <div class="kongbai"></div>
        </el-col>
        <el-col :span="5">
            <el-button type="primary" @click="addGoods">添加商品</el-button>
            <el-button type="#099FB8" @click="Empty">清空购物车</el-button>
        </el-col>
    </el-row>

    <el-table
            :data="GoodsCarList"
            style="width: 97%;margin: auto">
        <el-table-column
                label="略图">
            <template slot-scope="scope">
                <el-image style="width:5rem; height:5rem;cursor: pointer"
                          :src=scope.row.goodsImg.goodsImgUrl></el-image>
            </template>
        </el-table-column>
        <el-table-column
                label="商品编码"
                prop="goodsId"
              width="300">
        </el-table-column>
        <el-table-column
                label="商品名称"
                prop="goodsName">
        </el-table-column>
        <el-table-column
                label="数量"
                width="100">
            <template slot-scope="scope" >
                <el-input  v-model=scope.row.goodsNumber @change="inputChange(scope.$index, scope.row)"></el-input>
            </template>
        </el-table-column>
        <el-table-column
                label="单位"
                prop="goodsUnit.goodsUnitName">
        </el-table-column>
        <el-table-column
                label="订货价"
               >
            <template slot-scope="scope">
            ￥{{scope.row.goodsOrderPrice}}
             </template>
        </el-table-column>
        <el-table-column
                label="金额小计"
                       >
            <template slot-scope="scope">
                ￥{{scope.row.goodsNumber*scope.row.goodsOrderPrice}}
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <a     class="abc"
                       type="#099FB8"
                       @click="handleDelete(scope.$index, scope.row)">删除</a>
            </template>
        </el-table-column>
    </el-table>
<el-row  class="foot">
    <el-col :span="20">
        <div style="height: 1rem">

        </div>
    </el-col>
    <el-col :span="4">
        <div class="one">
            <span>合计:</span>
            <span>￥{{total}}</span>
        </div>
        <div class="two">
            <el-button type="primary" @click="Order">立即下单</el-button>
        </div>
    </el-col>
</el-row>

    </div>
</template>

<script>
    import {mapActions} from 'vuex'
    export default {
        name: "GoodsCart",
        data(){
            return{
                message:"加入时间",
                goodsNumber:0,
                zero:true,
                one:false,
                two:true,
                three:false,
            }
        },
        created() {
            this.queryShopCart().then(res => {    //购物车列表

            })
        },
        computed: {
            total(){
                let num=0
                this.GoodsCarList.filter(item=>{
                    num+=item.goodsNumber*item.goodsOrderPrice
                })
                console.log(num)
                return num
            },
            GoodsCarList() {   //购物车列表
                return this.$store.state.GoodsCar.GoodsCarList
            },
        },
        methods:{
            ...mapActions(["queryShopCart","queryShopCartByKeyword","updateShopCart","getGoodId","changeNum",
            "deleteShopCart","emptyShopCart"
            ]),
            inputChange(index,row){
                if(parseInt(row.goodsNumber)>0){
                    let id=row.goodsId
                    this.getGoodId(id)
                    let number=row.goodsNumber
                    this.changeNum(number)
                    let a={
                        number,
                        id
                    }
                    this.updateShopCart(a)
                }else if(parseInt(row.goodsNumber)===0){
                    let id=row.goodsId
                    this.$confirm('确定从购物车中删除这个商品吗?', '确认', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(() => {
                        this.deleteShopCart(id).then(res=>{
                            console.log(res)
                        })
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                } else {
                    this.$message.error('订购数量错误！');
                }

            },
            Order(){   //立即下单
                this.$router.push('/Main/Order/PurchaseOrder')
            },
            Empty(){    //清除
               this.emptyShopCart()
                this.$message('清除成功');
            },
            handleCommand(command) {     //排序
                if(command==='0'){
                    this.zero=false
                    this.one=true
                    this.message='加入时间'
                }
                if(command==='1'){
                    this.one=false
                    this.zero=true
                    this.message='加入时间'
                }
                if(command==='2'){
                    this.three=true
                    this.two=false
                    this.message='商品编码'
                }
                if(command==='3'){
                    this.three=false
                    this.two=true
                    this.message='商品编码'
                }
                this.queryShopCartByKeyword(command)
            },
            handleDelete(index, row) {     //删除
                console.log(index, row);
                let id=row.goodsId
                this.$confirm('你确定要从购物车中删除这个商品吗?', '确认', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    this.deleteShopCart(id).then(res=>{
                        console.log(res)
                    })
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            addGoods(){       //添加商品
                this.$router.push("/Main/Goods/GoodsList")
            },
        }
    }
</script>

<style scoped>
    .main-t{
        padding: 20px 20px;
        background-color: #FFF;
        font-size: 14px;
    }
    .el-dropdown-link {
        cursor: pointer;

    }
    .el-dropdown-link:hover{
        color: #0591aa;
    }
    .el-icon-arrow-down {
        font-weight:900;
        border:0.01rem solid #cecece;
    }
    .el-dropdown-link:hover .el-icon-arrow-down{
        background-color:#0591aa; ;
        color: white;
    }
    .kongbai{
        height: 1.2rem;
    }
    /*=====*/
    .abc{
        cursor: pointer;
        color: red;
        text-decoration:none;
    }
    .abc:hover{
        text-decoration:red;
        text-decoration:underline;
    }
    /*============*/
    .foot{
        width: 97%;
        margin: auto;
        background-color: #e5e8ea;
    }
    .one{
        padding-top:2.4rem;
        font-size: 14px
    }
    .one>span:last-child{
        margin-left:0.5rem;
        font-size: 20px;
        color: red;
    }
    .two{
        padding:1.4rem 0 1.4rem 4rem;
    }
</style>
